<template>
    <div class="app-container">
        <div class="container-top"></div>
        <div class="container-center">
            <div class="login-top">
                <van-tabs title-style ="tab-active" color="#4E94F6" title-active-color="#4E94F6">
                    <van-tab title="个人用户">
                        <van-form class="vanform">
                            <van-field
                                v-model="userInfo.cardId"
                                name="用户名"
                                placeholder="请输入身份证号码"
                                left-icon="yonghuming"
                            >
                                <van-icon class="iconfont iconsize" class-prefix="iconfont" slot="left-icon"  name="yonghuming"></van-icon>
                            </van-field>
                            <van-field
                                v-model="userInfo.password"
                                type="password"
                                name="密码"
                                placeholder="请输入密码"
                                left-icon="suo1"
                                clearable
                            >
                                <van-icon class="iconfont iconsize" class-prefix="iconfont" slot="left-icon"  font-size="30"  name="suo1"></van-icon>
                                <template #button>
                                <span class="forgetpw">
                                    忘记密码
                                </span>
                            </template>
                            </van-field>
                        </van-form>
                    </van-tab>
                    <van-tab title="法人用户" disabled>内容 2</van-tab>
                </van-tabs>
            </div>
            <div class="login-agree">
                <van-checkbox v-model="checked" shape="square" class="agree" icon-size="16px"></van-checkbox>
                <span class="agree-text">同意《<span class="_bule" @click="goAgreement">用户服务协议</span>》和《<span class="_bule" @click="goPrivacy">用户隐私政策</span>》</span>
            </div>
            <div class="login-btn">
                <van-button round type="info" class="btn" color="#528EFC" @click="login">登录</van-button>
                <p @click="goRegister">立即注册</p>
            </div>
        </div>
        <div class="container-bottom">
            <div class="bottom-content">
                <p class="heath">防疫健康码 (入境人员版)</p>
                <div class="loginType">
                    <div class="line"></div>
                    <span>其他方式登录</span>
                    <div class="line"></div>
                </div>
                <div class="zhifubao">
                    <i class="iconfont iconzhi">&#xe60a;</i>
                    <span>支付宝</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Login } from "@/api/index";
import { Toast } from 'vant';
import { mapMutations } from 'vuex'

export default {
    name: 'Login',
    data () {
        return{
            userInfo: {
                cardId: '',
                password: '',
            },
            checked: false
        }
    },
    methods: {
        login() {
            if(this.vaildate()){
                const { cardId, password } = this.userInfo;
                const params = {
                idcard: cardId,
                password: password
                }
                const toast1 = Toast.loading({
                    loadingType: 'spinner',
                    duration: 0,
                });
                Login(params).then(res => {
                    toast1.clear();
                    res = res.data;
                    if (res.code) {
                        const { userinfo } = res.data;
                        window.localStorage.setItem('token',userinfo.token);
                        this.changeUserName(userinfo.username);
                        this.changeUserAvatar(userinfo.avatar);
                        this.$router.push({path: '/index'});
                    } else {
                        Toast({
                            message: res.msg,
                            position: 'bottom',
                            duration: 3000,
                        });
                    }
                });
            }
        },
        ...mapMutations(['changeUserName']),
        ...mapMutations(['changeUserAvatar']),
        goRegister() {
            this.$router.push({path: '/register'});
        },
        vaildate() {
            let flag = true;
            if(!this.userInfo.cardId){
                Toast({
                    message: '请输入身份证号',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.userInfo.password) {
                Toast({
                    message: '请输入密码',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.checked){
                Toast({
                    message: '请仔细阅读并同意勾选《用户服务协议》和《隐私协议》',
                    position: 'bottom',
                });
                flag = false;
            }
            return flag;
        },
        goAgreement() {
            this.$router.push({path: '/agreement'});
        },
        goPrivacy() {
            this.$router.push({path: '/privacy'});
        } 
    }
}
</script>
<style lang="less" scoped>
.app-container{
    .container-top{
        width: 100%;
        padding-bottom: 50%;
        background-image: url('../../assets/images/loginbg.png');
        background-size: cover;
    }
    .container-center{
        .login-top{
            width: 90%;
            margin: auto;
            padding-top: 45px;   
            .vanform{
                margin: auto;
                padding-top: 30px;
            }
        }
        .login-agree{
            width: 81%;
            margin: auto;
            padding: 15px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            .agree{
            }
            .agree-text{
                font-size: 14px;
                color: #B1B5B4;
                padding-left: 8px;
            }
        }
        .login-btn{
            width: 90%;
            margin: auto;
            padding-top: 10px;
           .btn{
               width: 100%;
           }
           p{
               float: right;
               font-size: 14px;
               color: #2EA6BF;
               margin: 20px 15px 20px 0;
           }
        }
    }
    .container-bottom{
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: center;
        .bottom-content{
            width: 50%;
            margin: auto;
            font-size: 14px;
            color: #838383;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            .heath{
                padding-bottom: 60px;
                color: #24A8CF;
            }
            .loginType{
                width: 100%;
                padding-bottom: 40px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                .line{
                    width: 15%;
                    height: 0.5px;
                    border-bottom: 1px solid #9A9A9A;
                }
                span{
                    padding: 0 5px;
                    color: #838383;
                }
            }  
            .zhifubao{
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                padding-bottom: 40px;
                span{
                    padding: 8px 0;
                }
            }      
        }
    }
}
.tab-active{
    font-size: 16px;
    color: #9F9F9F;
}
.van-cell{
    font-size: 18px;
    padding: 15px;
    border-bottom: 1px solid #EFEFEF;
}
/deep/ .van-cell__value--alone{
    font-size: 14px;
    color: #E2E2E2;
    padding-left: 10px;
}
/deep/ .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
    border-width: 0;
}
/deep/.van-button{
    height: 50px;
    font-size: 18px!important;
}
/deep/ .van-tab--disabled{
    color: #A4A4A4;
}
/deep/ ::-webkit-input-placeholder {
    color: #E3E3E3;
    font-size: 12px;
  }
/deep/ :-moz-placeholder {
    color: #E3E3E3;
    font-size: 12px;
}
/deep/ ::-moz-placeholder{
    color: #E3E3E3;
    font-size: 12px;
}
/deep/ :-ms-input-placeholder {
    color: #E3E3E3;
    font-size: 12px;
}
.iconsize{
    font-size: 22px!important;
    color: #5794F1;
}
.iconzhi{
    font-size: 32px!important;
    color: #2FA7F5;
}
.forgetpw{
    color: #2EA6BF;
}
._bule{
    color: #2EA6BF!important;
}
</style>